<template>
  <div class="email-dia">
    <aside>
      <div class="option-group">
        <li
          @click="islink = 0"
          :class="islink == 0 ? 'activeLink' : ''"
          href="#jichu"
        >
          基础信息
        </li>
        <li
          @click="islink = 1"
          :class="islink == 1 ? 'activeLink' : ''"
          href="#yewu"
        >
          业务属性
        </li>
        <!--<li
          @click="islink = 2"
          :class="islink == 2 ? 'activeLink' : ''"
          href="#kuozhan"
        >
          扩展属性
        </li>-->
      </div>
    </aside>

    <el-form
      class="dia-form"
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="small"
      label-width="127px"
    >
      <div v-show="islink == 0">
        <el-col :span="24">
          <div class="tips" name="jichu">基础信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备名称" prop="field101">
            <el-input
              v-model="formData.field101"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产编号" prop="field102">
            <el-input
              v-model="formData.field102"
              placeholder="请输入资产编号"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IP地址" prop="field103">
            <el-input
              v-model="formData.field103"
              placeholder="请输入IP地址"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="MAC" prop="field104">
            <el-input
              v-model="formData.field104"
              placeholder="请输入MAC地址"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        	  <el-form-item     label="是否国产化" prop="field105">
                <el-select v-model="formData.field105" placeholder="请选择是否国产化" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field105Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">

              <el-form-item     label="设备类型" prop="field106">
                <el-select v-model="formData.field106" placeholder="请选择设备类型" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field106Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="物理位置" prop="field107">
                <el-select v-model="formData.field107" placeholder="请选择物理位置" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field107Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="设备使用状态" prop="field108">
                <el-select v-model="formData.field108" placeholder="请选择设备使用状态" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field108Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="归属部门" prop="field109">
                <el-select v-model="formData.field109" placeholder="请选择归属部门" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field109Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="安全域/区" prop="field110">
                <el-cascader v-model="formData.field110" :options="field110Options" :props="field110Props"
                  :style="{width: '100%'}" placeholder="请选择安全域/区" clearable></el-cascader>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="密级" prop="field111">
                <el-select v-model="formData.field111" placeholder="请选择密级" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field111Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="运维单位" prop="field112">
                <el-select v-model="formData.field112" placeholder="请选择运维单位" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field112Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="生产厂商" prop="field113">
                <el-select v-model="formData.field113" placeholder="请选择生产厂商" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field113Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="特殊设备" prop="field114">
                <el-select v-model="formData.field114" placeholder="请选择特殊设备" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field114Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="过保日期" prop="field115">
                <el-date-picker v-model="formData.field115" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :style="{width: '100%'}" placeholder="请选择过保日期" clearable></el-date-picker>
              </el-form-item> </el-col><el-col :span="12">
              <el-form-item     label="采购日期" prop="field116">
                <el-date-picker v-model="formData.field116" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :style="{width: '100%'}" placeholder="请选择采购日期" clearable></el-date-picker>
              </el-form-item> </el-col><el-col :span="24">
              <el-form-item label="备注" prop="field117">
                <el-input v-model="formData.field117" type="textarea" placeholder="请输入备注"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
              </el-form-item> </el-col><el-col :span="12">
              </el-col>
      </div>
      <div v-show="islink == 1">
        <!--业务属性开始-->
        <el-col :span="24" style="margin-bottom: 18px">
          <span class="el-icon-help" style="color: #2979ff" @click="AddClick"
            >添加IP/MAC：</span
          >
        </el-col>
        <el-col :span="24">
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :header-cell-style="{ background: '#F3F5FC' }"
          >
            <el-table-column
              prop="index"
              label="序号"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="name" label="IP地址" width="240">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="MAC地址" width="240">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.code"
                  :disabled="scope.row.code != ''"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作">
              <template slot-scope="scope">
                <span
                  style="color: blue"
                  v-if="scope.row.operate == ''"
                  @click.stop="MoveClick"
                  >删 除</span
                >
                <span v-else>{{ scope.row.operate }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <!--业务属性结束-->
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      islink: 0,
      formData: {
        field101: "华为云",
        field102: "GB20011",
        field103: "192.168.1.211",
        field104: "A1B2C3D4E5F6",
        field105: "是",
        field106: "APT设备",
        field107: "信息中心机房",
        field108: "",
        field109: "信息中心",
        field110: "内部网接入/终端接入",
        field111: "",
        field112: "",
        field113: "",
        field114: "",
        field115: "2022-07-12",
        field116: "2022-07-12",
        field117: "信息中心备注",
      },
      /**业务属性start**/
      tableData: [
        {
          index: 1,
          name: "192.168.1.191",
          code: "A1B2C3D4E5F6",
          operate: "--",
        },
      ],
      /**业务属性end**/
      rules: {
        field110: [
          {
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }
        ],
        field101: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'blur'
          }
        ],
        field102: [
          {
            required: true,
            message: '请输入资产编号',
            trigger: 'blur'
          }
        ],
        field103: [
          {
            required: true,
            message: '请输入IP地址',
            trigger: 'blur'
          }
        ],
        field104: [
          {
            required: true,
            message: '请输入MAC',
            trigger: 'blur'
          }
        ],
        field105: [
          {
            required: true,
            message: '请输入发送邮件端口',
            trigger: 'blur'
          }
        ],
        field106: [
          {
            required: true,
            message: '请输入发送邮件密码',
            trigger: 'blur'
          }
        ],
        field107: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field108: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field109: [
          {
            required: true,
            message: '请输入，多个用英文;隔开',
            trigger: 'blur'
          }
        ],
        field111: [],
        field112: [
          {
            required: true,
            message: '请输入，多个用英文;隔开标题',
            trigger: 'blur'
          }
        ],
        field113: [
          {
            required: true,
            message: '请输入正文',
            trigger: 'blur'
          }
        ]
      },
      field111Options: [
        {
          label: '及时发送模板',
          value: 1
        },
        {
          label: '定时发送模板',
          value: 2
        }
      ],
field105Options: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
      field106Options: [{
        "label": "APT",
        "value": 1
      }],
      field107Options: [{
        "label": "信息中心机房",
        "value": 1
      }],
      field108Options: [{
        "label": "库存中",
        "value": 1
      }, {
        "label": "待入网",
        "value": 2
      }, {
        "label": "已入网",
        "value": ""
      }, {
        "label": "维修中",
        "value": ""
      }, {
        "label": "退网中",
        "value": ""
      }, {
        "label": "已退网",
        "value": ""
      }, {
        "label": "报废中",
        "value": ""
      }, {
        "label": "已报废",
        "value": ""
      }],
      field109Options: [{
        "label": "信息中心",
        "value": 1
      }],
      field110Options: [{
        "label": "内部网接入",
        "value": "1",
        "id": 100,
        "children": [{
          "label": "终端接入",
          "value": 1,
          "id": 101
        }, {
          "label": "一般服务区",
          "value": 2,
          "id": 102
        }]
      }],
      field111Options: [{
        "label": "机密",
        "value": 1
      }, {
        "label": "秘密",
        "value": ""
      }, {
        "label": "内部",
        "value": ""
      }, {
        "label": "公开",
        "value": ""
      }, {
        "label": "绝密",
        "value": ""
      }],
      field112Options: [{
        "label": "运维单位1",
        "value": 1
      }, {
        "label": "运维单位2",
        "value": ""
      }],
      field113Options: [{
        "label": "宝兰德",
        "value": ""
      }, {
        "label": "瀚高",
        "value": 1
      }, {
        "label": "锐捷",
        "value": ""
      }, {
        "label": "华为",
        "value": ""
      }],
      field114Options: [{
        "label": "是",
        "value": ""
      }, {
        "label": "否",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    /**业务属性start**/
    AddClick() {
      const arr = {
        index: this.tableData[this.tableData.length - 1].index + 1,
        name: "",
        code: "",
        operate: "",
      };
      this.tableData.push(arr);
    },
    MoveClick() {
      this.tableData.pop();
    },
    /**业务属性end**/
  }
}
</script>
<style scoped lang="scss">
.email-dia {
  display: flex;
  height: 540px;
  width: 100%;
  justify-content: space-between;
  max-height: 100vh;

  aside {
    padding: 0;
    width: 140px !important;
    position: absolute;
    height: 540px;
    background: #fff;
    border-right: 1px solid #e8e8e8;

    .option-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      li {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px 0 15px 24px;
        cursor: pointer;
        font-size: 14px;
        color: #303032;
        font-weight: 400;

        &.activeLink {
          border-right: 2px solid #2979ff;
          background: #dfecff;
          color: #2979ff;
        }
      }
    }
  }

  .dia-form {
    margin-left: 140px;
    padding: 24px 80px 24px 24px;
    width: 100%;
  }
}
</style>
